<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>

	<body>
		<canvas id="mycanvas" width="1500" height="700"></canvas>
		<script type="text/javascript">
			var numbers = [
				[
					//0
					[0, 0, 1, 1, 1, 0, 0],
					[0, 1, 1, 0, 1, 1, 0],
					[1, 1, 0, 0, 0, 1, 1],
					[1, 1, 0, 0, 0, 1, 1],
					[1, 1, 0, 0, 0, 1, 1],
					[1, 1, 0, 0, 0, 1, 1],
					[1, 1, 0, 0, 0, 1, 1],
					[1, 1, 0, 0, 0, 1, 1],
					[0, 1, 1, 0, 1, 1, 0],
					[0, 0, 1, 1, 1, 0, 0],
				],
				[
					//1
					[0, 0, 0, 1, 1, 0, 0],
					[0, 1, 1, 1, 1, 0, 0],
					[0, 0, 0, 1, 1, 0, 0],
					[0, 0, 0, 1, 1, 0, 0],
					[0, 0, 0, 1, 1, 0, 0],
					[0, 0, 0, 1, 1, 0, 0],
					[0, 0, 0, 1, 1, 0, 0],
					[0, 0, 0, 1, 1, 0, 0],
					[0, 0, 0, 1, 1, 0, 0],
					[1, 1, 1, 1, 1, 1, 1],
				],
				[
					//2
					[0, 1, 1, 1, 1, 1, 0],
					[1, 1, 0, 0, 0, 1, 1],
					[0, 0, 0, 0, 0, 1, 1],
					[0, 0, 0, 0, 1, 1, 0],
					[0, 0, 0, 1, 1, 0, 0],
					[0, 0, 1, 1, 0, 0, 0],
					[0, 1, 1, 0, 0, 0, 0],
					[1, 1, 0, 0, 0, 0, 0],
					[1, 1, 0, 0, 0, 1, 1],
					[1, 1, 1, 1, 1, 1, 1],
				],
				[
					//3
					[1, 1, 1, 1, 1, 1, 1],
					[0, 0, 0, 0, 0, 1, 1],
					[0, 0, 0, 0, 1, 1, 0],
					[0, 0, 0, 1, 1, 0, 0],
					[0, 0, 0, 1, 1, 1, 0],
					[0, 0, 0, 0, 1, 1, 1],
					[0, 0, 0, 0, 0, 1, 1],
					[0, 0, 0, 0, 0, 1, 1],
					[1, 1, 0, 0, 0, 1, 1],
					[0, 1, 1, 1, 1, 1, 0],
				],
				[
					//4
					[0, 0, 0, 0, 1, 1, 0],
					[0, 0, 0, 1, 1, 1, 0],
					[0, 0, 1, 1, 1, 1, 0],
					[0, 1, 1, 0, 1, 1, 0],
					[1, 1, 0, 0, 1, 1, 0],
					[1, 1, 1, 1, 1, 1, 1],
					[0, 0, 0, 0, 1, 1, 0],
					[0, 0, 0, 0, 1, 1, 0],
					[0, 0, 0, 0, 1, 1, 0],
					[0, 0, 0, 1, 1, 1, 1],
				],
				[
					//5
					[1, 1, 1, 1, 1, 1, 1],
					[1, 1, 0, 0, 0, 0, 0],
					[1, 1, 0, 0, 0, 0, 0],
					[1, 1, 1, 1, 1, 1, 0],
					[0, 0, 0, 0, 0, 1, 1],
					[0, 0, 0, 0, 0, 1, 1],
					[0, 0, 0, 0, 0, 1, 1],
					[0, 0, 0, 0, 0, 1, 1],
					[1, 1, 0, 0, 0, 1, 1],
					[0, 1, 1, 1, 1, 1, 0],
				],
				[
					//6
					[0, 0, 0, 1, 1, 0, 0],
					[0, 0, 1, 1, 0, 0, 0],
					[0, 1, 1, 0, 0, 0, 0],
					[1, 1, 0, 0, 0, 0, 0],
					[1, 1, 0, 1, 1, 1, 0],
					[1, 1, 0, 0, 0, 1, 1],
					[1, 1, 0, 0, 0, 1, 1],
					[1, 1, 0, 0, 0, 1, 1],
					[1, 1, 0, 0, 0, 1, 1],
					[0, 1, 1, 1, 1, 1, 0],
				],
				[
					//7
					[1, 1, 1, 1, 1, 1, 1],
					[1, 1, 0, 0, 0, 1, 1],
					[0, 0, 0, 0, 1, 1, 0],
					[0, 0, 0, 0, 1, 1, 0],
					[0, 0, 0, 1, 1, 0, 0],
					[0, 0, 0, 1, 1, 0, 0],
					[0, 0, 1, 1, 0, 0, 0],
					[0, 0, 1, 1, 0, 0, 0],
					[0, 0, 1, 1, 0, 0, 0],
					[0, 0, 1, 1, 0, 0, 0],
				],
				[
					//8
					[0, 1, 1, 1, 1, 1, 0],
					[1, 1, 0, 0, 0, 1, 1],
					[1, 1, 0, 0, 0, 1, 1],
					[1, 1, 0, 0, 0, 1, 1],
					[0, 1, 1, 1, 1, 1, 0],
					[1, 1, 0, 0, 0, 1, 1],
					[1, 1, 0, 0, 0, 1, 1],
					[1, 1, 0, 0, 0, 1, 1],
					[1, 1, 0, 0, 0, 1, 1],
					[0, 1, 1, 1, 1, 1, 0],
				],
				[
					//9
					[0, 1, 1, 1, 1, 1, 0],
					[1, 1, 0, 0, 0, 1, 1],
					[1, 1, 0, 0, 0, 1, 1],
					[1, 1, 0, 0, 0, 1, 1],
					[0, 1, 1, 1, 0, 1, 1],
					[0, 0, 0, 0, 0, 1, 1],
					[0, 0, 0, 0, 0, 1, 1],
					[0, 0, 0, 0, 1, 1, 0],
					[0, 0, 0, 1, 1, 0, 0],
					[0, 0, 1, 1, 0, 0, 0],
				],
				[
					//10
					[0, 0, 0, 0],
					[0, 0, 0, 0],
					[0, 1, 1, 0],
					[0, 1, 1, 0],
					[0, 0, 0, 0],
					[0, 0, 0, 0],
					[0, 1, 1, 0],
					[0, 1, 1, 0],
					[0, 0, 0, 0],
					[0, 0, 0, 0],
				]

			];
			var canvas = document.getElementById("mycanvas");
			var ctx = canvas.getContext("2d");
			//			ctx.fillStyle = "bisque";
			//			ctx.fillRect(0, 0, 1500, 750);
			var text = [0, 0, 10, 0, 0, 10, 0, 0];

			var img = new Image();
			img.src = "img/17d071e0d401d808f2f8bee70fa8c394_1920_0.jpg";

			var date = new Date(); //打印的时间
			var balls = [];

			img.onload = function() {
				setInterval(function() {
					ctx.clearRect(0, 0, canvas.width, canvas.height);
					ctx.drawImage(img, 0, 0);
					var time = new Date();
					if(time.getSeconds() != date.getSeconds()) {
						//判断秒数各位变，还是十位变
						var gw = date.getSeconds() % 10;
						//添加小球
						addBall(960, 10, gw);
						var sw1 = parseInt(date.getSeconds() / 10);
						var sw2 = parseInt(time.getSeconds() / 10);
						if(sw1 != sw2) {
							//添加小球
							addBall(790, 10, sw1);
						}

						//秒数变了
						date = time;
					}
					text[0] = parseInt(date.getHours() / 10);
					text[1] = date.getHours() % 10;
					text[3] = parseInt(date.getMinutes() / 10);
					text[4] = date.getMinutes() % 10;
					text[6] = parseInt(date.getSeconds() / 10);
					text[7] = date.getSeconds() % 10;

					for(var i = 0; i < text.length; i++) {
						if(i == 0 || i == 1) {
							drawNumber(i * 160 + 10, 10, text[i]);
						}
						if(i == 2) {
							drawNumber(i * 160 - 10, 10, text[i]);
						}
						if(i == 3 || i == 4) {
							drawNumber(i * 160 - 90, 10, text[i]);
						}
						if(i == 5) {
							drawNumber(i * 160 - 110, 10, text[i]);
						}
						if(i == 6 || i == 7) {
							drawNumber(i * 160 - 190, 10, text[i]);
						}
					}
					drawBalls(); //打印小球
				}, 33);
			};

			function addBall(ball1X, ball1Y, number) {
				for(var i = 0; i < numbers[number].length; i++) {
					//					ball1Y = ball1Y + 20;
					var t1 = i * 20;
					for(var j = 0; j < numbers[number][i].length; j++) {
						//						ball1X = ball1X + 20;
						var l1 = j * 20;

						if(numbers[number][i][j] == 1) {
							//添加小球
							var vx = (Math.random() * 5) + 5;
							if(Math.random() > 0.5) {
								vx = -vx;
							}
							var vy = (Math.random() * 10) + 5;
							if(Math.random() > 0.5) {
								vy = -vy;
							}
							var y = parseInt(Math.random() * 256);
							var g = parseInt(Math.random() * 256);
							var b = parseInt(Math.random() * 256);
							var a = Math.random();
							var color = "rgba(" + y + "," + g + "," + b + "," + a + ")";
							//x,y,r,vx,vy,color
							balls.push([ball1X + l1, ball1Y + t1, 10, vx, vy, color]);
						}
					}
				}
			}

				function drawBalls() {
					for(var i = 0; i < balls.length; i++) {
						ctx.beginPath();
						ctx.fillStyle = balls[i][5];
						ctx.arc(balls[i][0], balls[i][1], balls[i][2], 0, 2 * Math.PI);
						ctx.fill();
						balls[i][0] = balls[i][0] + balls[i][3];
						balls[i][1] = balls[i][1] + balls[i][4];
						balls[i][4] = balls[i][4] + 3;
						if(balls[i][1] > canvas.height - balls[i][2]) {
							balls[i][1] = canvas.height - balls[i][2];
							balls[i][4] = -balls[i][4] * 0.6;

						}
					}
				}

				function drawNumber(arcX, arcY, num) {
					var number1 = numbers[num];

					var r = 10;
					var y = parseInt(Math.random() * 256);
					var g = parseInt(Math.random() * 256);
					var b = parseInt(Math.random() * 256);
					for(var i = 0; i < number1.length; i++) {
						var y = arcY + 2 * r * i;
						for(var j = 0; j < number1[i].length; j++) {

							if(number1[i][j] == 1) {
								ctx.fillStyle = "rgb(" + y + ", " + g + ", " + b + ")";
								ctx.beginPath();
								var x = arcX + 2 * r * j;

								ctx.arc(x, y, r, 0, 2 * Math.PI);
								ctx.fill();
							}

						}
					}
				}
		</script>
	</body>

</html>